// 路由和标签相关操作
import { isString, isEmpty } from "@pureadmin/utils";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import {
  useRouter,
  useRoute,
  type LocationQueryRaw,
  type RouteParamsRaw
} from "vue-router";

export function useDetail() {
  const route = useRoute();
  const router = useRouter();
  const getParameter = isEmpty(route.params) ? route.query : route.params;

  function toDetail(routeInfo: routeInfo) {
    // ⚠️ 这里要特别注意下，因为vue-router在解析路由参数的时候会自动转化成字符串类型，比如在使用useRoute().route.query或useRoute().route.params时，得到的参数都是字符串类型
    // 所以在传参的时候，如果参数是数字类型，就需要在此处 toString() 一下，保证传参跟路由参数类型一致都是字符串，这是必不可少的环节！！！
    Object.keys(routeInfo.data).forEach(param => {
      if (!isString(routeInfo.data[param])) {
        routeInfo.data[param] = routeInfo.data[param].toString();
      }
    });
    routeInfo.model = routeInfo.model ?? "query";

    if (routeInfo.model === "query") {
      // 保存信息到标签页
      useMultiTagsStoreHook().handleTags("push", {
        // path: `/mall/pms/goods/form`,
        name: routeInfo.pathName,
        query: routeInfo.data,
        meta: {
          title: `${routeInfo.tabName}`,
          // 最大打开标签数
          dynamicLevel: 3
        }
      });
      // 路由跳转
      router.push({ name: `${routeInfo.pathName}`, query: routeInfo.data });
    } else if (routeInfo.model === "params") {
      useMultiTagsStoreHook().handleTags("push", {
        path: `/tabs/params-detail/:id`,
        name: `${routeInfo.pathName}`,
        params: routeInfo.data,
        meta: {
          title: `${routeInfo.tabName}`
        }
      });
      router.push({ name: `${routeInfo.pathName}`, params: routeInfo.data });
    }
  }

  // 用于页面刷新，重新获取浏览器地址栏参数并保存到标签页
  const initToDetail = (model: "query" | "params") => {
    if (getParameter)
      toDetail({
        data: getParameter,
        model
      });
  };

  return { toDetail, initToDetail, getParameter, router };
}
